<template>
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar
      class="nav"
      style="border-bottom: 0.01rem solid #eee; background-color: #282629"
      :title="this.$route.params.name"
      left-arrow
      @click-left="onClickLeft"
    />
  </van-config-provider>
  <ul class="main">
    <li v-for="item in dataList" :key="item.id">
      <!-- Left -->
      <div
        class="chat-sender"
        v-if="this.$store.state.user.profile?.user_id != item.user_id"
      >
        <div>
          <img :src="item.user_avatar" />
        </div>
        <div>
          {{ item.user_name }}
          -
          {{ item.createtime }}
        </div>
        <div>
          <div class="chat-left_triangle"></div>
          <span>{{ item.content.split("").join(" ") }}</span>
        </div>
      </div>
      <!-- Right -->
      <div
        class="chat-receiver"
        v-if="this.$store.state.user.profile?.user_id == item.user_id"
      >
        <div>
          <img :src="item.user_avatar" />
        </div>

        <div>
          {{ item.createtime }}
          -
          {{ item.user_name }}
        </div>
        <div>
          <div class="chat-right_triangle"></div>
          <span>{{ item.content.split("").join(" ") }}</span>
        </div>
      </div>
    </li>
  </ul>
  <div class="entry">
    <van-field
      style="
        width: 75%;
        height: 1.8rem;
        border: 1px solid #ccc;
        border-radius: 2rem;
        margin: 0.6rem auto;
        font-size: 0.1rem;
        padding: 0.2rem 0.6rem;
        transform: translateX(-1.4rem);
      "
      v-model="commentValue"
      autosize
      rows="4"
      size="large"
      type="textarea"
      placeholder="请输入..."
      @keyup.enter="handleReply"
    />
    <span
      style="
        position: absolute;
        right: 5%;
        top: 0;
        color: #fff;
        line-height: 3rem;
      "
      @click="handleReply"
      >发送</span
    >
  </div>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from "vue";
import { getContentList, sendContent, sendOut } from "@/api/contact";
import { gitUsermessage } from "@/api/home";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import moment from "moment";
export default {
  name: "",
  setup() {
    const store = useStore();
    const route = useRoute();

    const { proxy } = getCurrentInstance();
    var pubsub = proxy.$goeasy.pubsub;

    const dataList = ref([]);
    const commentValue = ref("");

    const onClickLeft = () => history.back();

    const getDataList = () => {
      const query = {
        user_id: store.state.user.profile.user_id,
        cover_user_id: route.params.id,
      };
      getContentList(query)
        .then((res) => {
          res.data.forEach((item) => {
            item.createtime = moment(item.createtime).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
          dataList.value = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted(() => {
      getDataList();
    });

    const handleReply = () => {
      let cover_user_avatar;
      gitUsermessage(route.params.id)
        .then((res) => {
          cover_user_avatar = res.data.user_avatar;
          const obj = {
            user_name: store.state.user.profile.user_name,
            user_avatar: store.state.user.profile.user_avatar,
            content: commentValue.value,
            user_id: store.state.user.profile.user_id,
            cover_user_id: route.params.id,
            cover_user_name: route.params.name,
            cover_user_avatar: cover_user_avatar,
          };
          // 发送消息
          pubsub.publish({
            channel: store.state.user.profile.user_id, //替换为您自己的channel
            message: JSON.stringify(obj), //替换为您想要发送的消息内容
            onSuccess: function () {
              const params = {
                user_id: store.state.user.profile.user_id,
                cover_user_id: route.params.id,
                user_name: store.state.user.profile.user_name,
                user_avatar: store.state.user.profile.user_avatar,
                content: commentValue.value,
                createtime: moment().format("YYYY-MM-DD HH:mm:ss"),
              };
              sendContent(params)
                .then((res) => {
                  if (res.status === 200) {
                    getDataList();
                    commentValue.value = "";
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 接受消息
    pubsub.subscribe({
      channel: route.params.id, //替换为您自己的channel
      onMessage: function (message) {
        const {
          user_id,
          user_name,
          user_avatar,
          content,
          cover_user_id,
          cover_user_name,
          cover_user_avatar,
        } = JSON.parse(message.content);
        const params = {
          user_id,
          cover_user_id,
          user_name,
          user_avatar,
          cover_user_name,
          cover_user_avatar,
          content,
          createtime: moment().format("YYYY-MM-DD HH:mm:ss"),
        };
        sendOut(params);
        setTimeout(() => {
          getDataList();
        }, 1000);
      },
    });

    // themeVars 内的值会被转换成对应 CSS 变量
    // 比如 sliderBarHeight 会转换成 `--van-slider-bar-height`
    const themeVars = {
      navBarTitleTextColor: "#fff",
      navBarIconColor: "#fff",
    };

    return {
      onClickLeft,
      dataList,
      commentValue,
      handleReply,
      themeVars,
    };
  },
};
</script>
<style scoped lang="less">
.main {
  padding: 1rem 0.6rem;
  height: calc(100% - 46px - 3rem);
  background-color: #fff;
  overflow-y: auto;

  li {
    margin-bottom: 2rem;

    .chat-sender {
      overflow: hidden;
      font-size: 80%;
    }

    .chat-sender span {
      letter-spacing: -0.1rem;
      font-size: 0.85rem;
    }

    .chat-sender div:nth-of-type(1) {
      float: left;
    }

    .chat-sender div:nth-of-type(2) {
      margin: 0 3rem 0.1rem 3rem;
      padding: 0;
      color: #848484;
      font-size: 70%;
      text-align: left;
    }

    .chat-sender div:nth-of-type(3) {
      float: left;
      position: relative;
      background-color: #282629;
      color: #fff;
      margin-left: 0.8rem;
      padding: 0.6rem;
      border-radius: 0.5rem;
      max-width: calc(80% - 0.6rem);
    }

    .chat-receiver {
      overflow: hidden;
      font-size: 80%;
    }

    .chat-receiver div:nth-of-type(1) {
      float: right;
    }

    .chat-receiver div:nth-of-type(2) {
      margin: 0 3rem 0.1rem 3rem;
      padding: 0;
      color: #848484;
      font-size: 70%;
      text-align: right;
    }

    .chat-receiver div:nth-of-type(3) {
      float: right;
      position: relative;
      background-color: #efcf60;
      margin-right: 0.8rem;
      padding: 0.6rem;
      border-radius: 0.5rem;
      max-width: calc(80% - 0.6rem);
    }

    .chat-receiver div:first-child img,
    .chat-sender div:first-child img {
      width: 2.4rem;
      height: 2.4rem;
      border-radius: 10%;
    }

    .chat-left_triangle {
      height: 0;
      width: 0;
      border-width: 0.4rem;
      border-style: solid;
      border-color: transparent #282629 transparent transparent;
      position: absolute;
      left: -0.75rem;
      top: 0.76rem;
    }

    .chat-right_triangle {
      height: 0;
      width: 0;
      border-width: 0.4rem;
      border-style: solid;
      border-color: transparent transparent transparent #efcf60;
      position: absolute;
      right: -0.75rem;
      top: 0.76rem;
    }

    .chat-receiver span {
      color: #282629;
      letter-spacing: -0.1rem;
      font-size: 0.85rem;
    }
  }
}

.entry {
  width: 100%;
  height: 3rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #282629;
  border-top: 0.01rem solid #eee;
}
</style>
